import React, { useState } from 'react';
import { Tag } from 'antd';
const { CheckableTag } = Tag;

/**
 * 自定义表单控件
 * value   表单回填接受的数据
 * onChange    与form.item进行绑定的数据
 */
const Tagscom = ({
  tagsData = [],
  value = [],
  onChange,
}: {
  tagsData: string[];
  value: string[];
  onChange: any;
}) => {
  const [selectedTags, setSelectedTags] = useState<string[]>(value);

  const handleChange = (tag: string, checked: boolean) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((item: string) => item !== tag);
    onChange(nextSelectedTags);
    setSelectedTags(nextSelectedTags);
  };

  return (
    <div>
      {tagsData.map((tag) => (
        <CheckableTag
          key={tag}
          checked={selectedTags.indexOf(tag) > -1}
          onChange={(checked) => handleChange(tag, checked)}
        >
          {tag}
        </CheckableTag>
      ))}
    </div>
  );
};
export default Tagscom;
